<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../css/personal-detail.css">
  <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="personal-r f-r">
    <div class="personal-right">
      <div class="personal-r-tit">
        <h3><i class="fa fa-address-book-o fa-lg"></i>&nbsp;&nbsp;个人资料</h3>
      </div>
      <div class="data-con">
        <div class="dt1">
          <p class="f-l"><i class="fa fa-camera-retro fa-lg"></i>&nbsp;&nbsp;当前头像：</p>
          <div class="touxiang f-l">
            <div class="tu f-l">
              <a href="#">
                <img src="../images/detail-data-tu.gif" />
                <input type="file" name="" id="" class="img1" />
              </a>
            </div>
            <a href="JavaScript:;" class="sc f-l" shangchuang="">上传头像</a>
            <div style="clear:both;"></div>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="dt1">
          <p class="dt-p f-l"> <i class="as fa fa-user-circle-o fa-lg"></i>&nbsp;&nbsp;昵称：</p>
          <input type="text" placeholder="请输入昵称" />
          <div style="clear:both;"></div>
        </div>
        <div class="dt1">
          <p class="dt-p f-l"><i class="fa fa-user-o fa-lg"></i> &nbsp;&nbsp;用户名：</p>
          <input type="text" placeholder="请输入你的用户名" value="全栈" />
          <div style="clear:both;"></div>
        </div>
        <div class="dt1 dt2">
          <p class="dt-p f-l"><i class="sex fa fa-venus-mars fa-lg"></i>&nbsp;性别：</p>
          <input type="radio" name="hobby" value="nan"></input><span><i class="fa fa-mars fa-lg"></i></span>
          <input type="radio" name="hobby" value="nan"></input><span><i class="fa fa-venus fa-lg"></i></span>
          <div style="clear:both;"></div>
        </div>
        <div class="dt1">
          <p class="dt-p f-l"><i class="age fa fa-birthday-cake fa-lg"></i>&nbsp;&nbsp;年龄：</p>
          <input type="text"  placeholder="请输入您的年龄" value="20" />
          <div style="clear:both;"></div>
        </div>
        <div class="dt1 dt3">
          <p class="dt-p f-l"><i class="phone fa fa-phone-square fa-lg"></i>&nbsp;手机号：</p>
          <input type="text"  placeholder="请输入你的手机号" value="12345678910" />
          <button>获取短信验证码</button>
          <div style="clear:both;"></div>
        </div>
        <div class="dt1">
          <p class="dt-p f-l"><i class="code fa fa-address-card-o fa-lg"></i>验证码：</p>
          <input type="text" placeholder="请输入你的验证码" value="" />
          <div style="clear:both;"></div>
        </div>
        <div class="dt1">
          <p class="dt-p f-l"><i class="email fa fa-qq fa-lg"></i>&nbsp;&nbsp;邮箱：</p>
          <input type="text"  placeholder="请输入你的邮箱" value="111111111@qq.com" />
          <div style="clear:both;"></div>
        </div>
        <div class="dt1 dt4">
          <p class="dt-p f-l"><i class="password fa fa-address-card-o fa-lg"></i>&nbsp;&nbsp;密码：</p>
          <input type="password" placeholder="请输入你的密码" value="" />
          <button>修改密码</button>
          <div style="clear:both;"></div>
        </div>
        <button class="btn-pst">保存</button>
      </div>
    </div>
  </div>
  <div style="clear:both;"></div>
  </div>

  <!-- 上传头像弹窗 -->
  <!-- <div class="tanchuang">
    <div class="t-c-bg"></div>
    <div class="t-c-con">
        <div class="tc-tit">
            <h3>上传头像</h3>
              <a href="JavaScript:;" delete=""><img src="../images/detail-t-c-del.gif" /></a>
              <div style="clear:both;"></div>
          </div>
          <div class="tc-con">
            <a href="#"><img src="../images/detail-data-tu.gif" /></a>
              <button class="del">保存头像</button>
          </div>
      </div>
  </div> -->

</body>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" color="#1e1e1e" pointColor="255,0,0" opacity='0.7' zIndex="-2" count="400"
  src="../background-special-effects/dist/canvas-nest.js"></script>
<script type="text/javascript" src="../background-special-effects/dist/canvas-nest.umd.js"></script>
<script type="text/javascript">
  var cn = new CanvasNest(document.getElementById('area-render'), {
    color: '255,0,0',
    count: 400,
  });
</script>


</html>